<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>事件处理</title>
</head>

<body>
  <!--
          1. 绑定监听
                绑定语法:
                    v-on:click="fun"
                    @click="fun"
            
                event 表示原始的DOM事件
                    事件回调函数没有参数时，可以将event作为默认形参
                    在内联语句中访问原始DOM事件，可以用特殊变量$event传入方法

          2. 事件修饰符
               .prevent  阻止事件的默认行为 event.preventDefault()
               .stop  停止事件冒泡 event.stopPropagation()


          3. 按键修饰符
              .keycode  操作的是某个keycode值的健
              .enter  操作的是enter键
  -->

  <div id="example">

    <h2>绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('abcd', $event)">test2</button>

    <h2>事件修饰符</h2>
    <a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
    <div style="width: 200px;height: 200px;background: red" @click="test4">
      <div style="width: 100px;height: 100px;background: blue" @click.stop="test5"></div>
    </div>

    <h2>按键修饰符</h2>
    <input type="text" @keyup.13="test6">
    <input type="text" @keyup.enter="test6">

  </div>

  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#example',
      data: {

      },
      methods: {
        test1(event) { // event默认事件形参，是原生的DOM事件
          alert(event.target.innerHTML)
        },
        test2(msg, event) { // 在内联语句中访问原始DOM事件，可以用特殊变量$event传入方法
          alert(msg + '   ' + event.target.textContent)
        },
        test3() {
          alert('点击了链接')
        },
        test4() {
          alert('out')
        },
        test5() {
          alert('inner')
        },
        test6(event) {
          console.log(event.keyCode)
          alert(event.target.value)
        }
      }
    })
  </script>
</body>

</html>